<div class="info_contain">
    <div class="information" id="right_card_number" style="font-weight: bold">
        <div class="title">Thẻ hợp lệ :</div>
        <div class="value"><?php echo $rightCardNumber; ?></div>
    </div>
    <div class="information" id="wrong_card_number" style="font-weight: bold">
        <div class="title">Thẻ không hợp lệ :</div>
        <div class="value"><?php echo $wrongCardNumber; ?></div>
    </div>
    <?php foreach($summary as $item): ?>
    <div class="information" id="<?php echo str_replace(' ','',$item->ticket_title); ?>">
        <div class="title"><?php echo $item->ticket_title; ?> :</div>
        <div class="value"><?php echo $item->sum_number; ?></div>
    </div>
    <?php endforeach; ?>

    <a href="javascript:void ('');" class="report_button" onclick="show_report();">Report</a>
</div>
<div class="contain">
<input id="ticket_input" name="text_input" type="text" value="" />
    <div class="clear"></div>
    <div class="message">Nhập thẻ</div>
</div>


    <script type="text/javascript">

        function show_report(){
            window.open('<?php echo base_url()?>load-report','Ticket report', 800, 600);
        }

        function validateInput(inputText) {
            if(inputText.length != 14) return false;
            return pattern.test(inputText);
        };

        function post_and_check_data(){

                var ticketNum = $('#ticket_input').val();
//                    if(!validateInput(ticketNum)) {
//                        $('#ticket_input').val('');
//                        return;
//                    }

                if(ticketNum == '') return;

                ticketNum = ticketNum.replace('%','');
                ticketNum = ticketNum.replace('?','');
                ticketNum = ticketNum.replace(' ','');
                ticketNum = ticketNum.replace(' ','');

                $.ajax({
                    type: "POST",
                    timeout:8000,
                    url: "<?php echo base_url()?>check-ticket-number",
                    data:{ticket:ticketNum},
                    dataType:'JSON',
                    success:function(data){

                        if(data.status != 'SUCCESS'){
                            // card is not accepted
                            $('.message').addClass('error');
                            $('.message').html(data.message);

                        }else{
                            // card is right
                            $('.message').removeClass('error');
                            $('.message').html(data.message);
                        }


                        $('#ticket_input').val('');
                        $('#ticket_input').focus();
                        $('#right_card_number .value').html(data.rightCardNumber);
                        $('#wrong_card_number .value').html(data.wrongCardNumber);

                        // update summary table
                        data.summary.forEach(function(item){
                            $('#'+item.ticket_title.replace(/ /g,'')+ ' .value').html(item.sum_number);
                        });

                    },
                    error: function(xhr, status, error) {
                        alert(xhr.responseText);
                    }
                });
        }

        $(function(){

            pattern = /%+[0-9-()+]+\?/;

            $('#ticket_input').focus();


            canCheck = true;

            $('#ticket_input').keypress(function(keycode){




                if(keycode.which == 13){
                    post_and_check_data();
                    canCheck = true;
                }
            });

            $('#ticket_input').keyup(function(){
                var inputValue = $('#ticket_input').val();
                if(inputValue.substr(0,1) != '%' && inputValue.length >= 14){
                    post_and_check_data();
                }
            });

        });
    </script>